<template>
  <div class="applet-publish-container">
    <div>
      <el-input v-model="targetArry[item-1]" v-for="item in 7" :key="item" style="width: 60px;margin-right:20px" size="mini"></el-input>
      <el-button type="text" @click="begin = true; comparison()">开始</el-button>
      <el-button type="text" @click="begin = false">停止</el-button>
    </div>
    <div style="padding: 20px 0">
      <div style="display:inline-block;padding:0 10px;font-size:18px">
        <span v-for="item in frontCodeArry" :key="item" style="display:inline-block;padding: 10px 10px">{{item}}</span>
      </div>
      <div style="display:inline-block;padding:0 10px;font-size:18px">
        <span v-for="item in beforeCodeArry" :key="item" style="display:inline-block;padding: 10px 10px">{{item}}</span>
      </div>
      <div style="padding 30px 0">
        <span>次数：</span>
        <span>{{ number }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ number * 2 }}元</span>
      </div>
    </div>
    <el-button type="text" @click="produce">刷新</el-button>

    <div class="award">
      <div>
        <span>一等奖：</span>
        <span>{{ frist }}</span>
      </div>
      <div>
        <span>二等奖：</span>
        <span>{{ second }}</span>
      </div>
      <div>
        <span>三等奖：</span>
        <span>{{ third }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ third * 10000 }}元</span>
      </div>
      <div>
        <span>四等奖：</span>
        <span>{{ fourth }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ fourth * 3000 }}元</span>
      </div>
      <div>
        <span>五等奖：</span>
        <span>{{ fifth }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ fifth * 300 }}元</span>
      </div>
      <div>
        <span>六等奖：</span>
        <span>{{ sixth }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ sixth * 200 }}元</span>
      </div>
      <div>
        <span>七等奖：</span>
        <span>{{ seventh }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ seventh * 100 }}元</span>
      </div>
      <div>
        <span>八等奖：</span>
        <span>{{ eighth }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ eighth * 15 }}元</span>
      </div>
      <div>
        <span>九等奖：</span>
        <span>{{ ninth }}</span>
        <span style="margin-left: 30px">金额：</span>
        <span>{{ ninth * 5 }}元</span>
      </div>
    </div>
    <div style="padding: 20px 0">
      <span>总中奖金额：</span>
      <span>{{ bonus }}元</span>
    </div>
    <div>
      <span>奖池：</span>
      <span>{{ price }}元</span>
    </div>
  </div>
</template>

<script>
import { randomNum } from '@/utils'

export default {
  data() {
    return {
      frontCodeArry: [],
      beforeCodeArry: [],
      targetArry: ['3', '16', '20', '26', '29', '3', '9'],
      begin: false,

      frist: 0,
      second: 0,
      third: 0,
      fourth: 0,
      fifth: 0,
      sixth: 0,
      seventh: 0,
      eighth: 0,
      ninth: 0,
      number: 0,

      bonus: 0,
      price: 0
    }
  },
  mounted() {
    this.produce();
  },
  methods: {
    produce() {
      let count = 0;
      this.frontCodeArry = [];
      while (count<5) {
        const num = randomNum(1,35);
        if(this.frontCodeArry.indexOf(num) < 0) {
          this.frontCodeArry.push(num);
          count ++;
        }
      }
      this.frontCodeArry.sort((a,b) => {
        return a - b;
      });


      let beforeCount = 0;
      this.beforeCodeArry = [];
      while (beforeCount < 2) {
        const num = randomNum(1,12);
        if(this.beforeCodeArry.indexOf(num) < 0) {
          this.beforeCodeArry.push(num);
          beforeCount ++;
        }
      }
      this.beforeCodeArry.sort((a,b) => {
        return a - b;
      });
    },
    comparison() {
      // console.log(this.targetArry);
      this.targetArry.some(item => {
        // console.log(item.trim())
        if(item.trim() === '') {
          this.$message.error('请完整的填写目标号码！');
          this.begin = false;
          return true;
        }
      })
      const arry = [ 
        parseInt(this.targetArry[0]), 
        parseInt(this.targetArry[1]), 
        parseInt(this.targetArry[2]), 
        parseInt(this.targetArry[3]), 
        parseInt(this.targetArry[4]), 
        parseInt(this.targetArry[5]), 
        parseInt(this.targetArry[6]) 
      ]
      this.intervalId = setInterval(() => {
        this.produce();
        let fCount = 0;
        let bCount = 0;
        arry.forEach((item,index) => {
          if(index < 5) {
            if(item === this.frontCodeArry[index]) {
              fCount++;
            }
          }else{
            if(item === this.beforeCodeArry[index - 5]) {
              bCount ++;
            }
          }
        })

        if(fCount === 0 && bCount === 2) {
          this.ninth ++ ;
        }
        if(fCount === 1 && bCount === 2) {
          this.ninth ++ ;
        }
        if(fCount === 2 && bCount === 1) {
          this.ninth ++ ;
        }
        if(fCount === 3 && bCount === 0) {
          this.ninth ++ ;
        }


        if(fCount === 2 && bCount === 2) {
          this.eighth ++ ;
        }
        if(fCount === 3 && bCount === 1) {
          this.eighth ++ ;
        }


        if(fCount === 4 && bCount === 0) {
          this.seventh ++ ;
        }


        if(fCount === 3 && bCount === 2) {
          this.sixth ++ ;
        }


        if(fCount === 4 && bCount === 1) {
          this.fifth ++ ;
        }

        if(fCount === 4 && bCount === 2) {
          this.fourth ++ ;
        }

        if(fCount === 5 && bCount === 0) {
          this.third ++ ;
        }

        if(fCount === 5 && bCount === 1) {
          this.second ++ ;
        }

        if(fCount === 5 && bCount === 2) {
          this.frist ++ ;
          this.begin = false;
        }

        this.number ++ ;

        this.bonus = (this.ninth * 5) + (this.eighth * 15) + (this.seventh * 100) + (this.sixth * 200) + (this.fifth * 300) + (this.fourth * 3000) + (this.third * 10000);
        this.price = (this.number * 2) - this.bonus;

        if(this.begin === false) {
          clearInterval(this.intervalId);
        }
      },0.0000001)

      
      // console.log(this.intervalId)
      // while (this.begin) {
        
      // }
    }
  },
}
</script>

<style lang="scss" scoped>
.applet-publish-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
  text-align: center;
}
.award{
  &>div{
    // display: inline-block;
    padding: 10px 20px;
  }
}
</style>